<template>
	<view class="uni-stat--x " style="height: 100%;width: 100%;">
		<qiun-data-charts type="line" :opts="columnopts" :ontouch="true" :chartData="chartData" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				columnopts: {
					padding: [15, 15, 10, 5],
					enableScroll: true,
					color: ["#333333", "#aec4d8", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
					legend:{
						position:"top"
					},
					xAxis: {
						calibration: true,
						disableGrid: true,
						itemCount: 3,
						title:"DFdfgsdgmsklgn",
					},
					yAxis: {
						title:"DFdfgsdgmsklgn",
						gridType: "dash",
						dashLength: 2,
						splitNumber: 4,
						data: [{
							min: 0
						}]
					},
					padding:[30,0,25,25],
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
		mounted() {
			setTimeout(() => {
				let res = {
					categories: ["设备总数", "机房总数", "警告通知"],
					series: [{
							name: "目标值",
							data: [9, 3, 9]
						},

					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		}
	}
</script>

<style lang="scss" scoped>
	.uni-stat--x {
		border-radius: 10px;
		border-color: #99a9bf;
		background-color: rgb(248, 249, 251);
		margin-bottom: 15px;
	}
</style>